﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>加载自定义导航条</title>
    <link href="../../libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="../../libs/ol/ol.js" type="text/javascript" ></script>
    <style type="text/css">
        #map{
            width:100%;
            height:100%;
            position:absolute;
        }    
        /**
         * 缩放滑块控件ZoomSlider的样式，放置到缩放按钮之间实现导航条功能
         */
        #map .ol-zoom .ol-zoom-out {
            margin-top: 204px;
        }
        #map .ol-zoomslider {
            background-color : transparent;
            top: 2.3em;
        }
        #map .ol-touch .ol-zoom .ol-zoom-out {
            margin-top: 212px;
        }
        #map .ol-touch .ol-zoomslider {
            top: 2.75em;
        }
        #map .ol-zoom-in.ol-has-tooltip:hover [role=tooltip],
        #map .ol-zoom-in.ol-has-tooltip:focus [role=tooltip] {
            top: 3px;
        }
        #map .ol-zoom-out.ol-has-tooltip:hover [role=tooltip],
        #map .ol-zoom-out.ol-has-tooltip:focus [role=tooltip] {
            top: 232px;
        }        
        /**
        * 缩放控件zoomToExtent的样式设置
        */
        #map .ol-zoom-extent { 
            top: 280px;
        }
    </style>
</head>
<body>
    <div id="map" > 
    </div>
    <script type="text/javascript">
        //实例化Map对象加载地图
        var map = new ol.Map({
            target: 'map', //地图容器div的ID
            //地图容器中加载的图层
            layers: [
            //加载瓦片图层数据
                new ol.layer.Tile({
                    source: new ol.source.OSM() //图层数据源
                })
            ],
            //地图视图设置
            view: new ol.View({
                center: [12000000, 4000000], //地图初始中心点
                zoom: 4  //地图初始显示级别
            })
        });
        //实例化ZoomSlider控件并加载到地图容器中
        var zoomslider = new ol.control.ZoomSlider(); 
        map.addControl(zoomslider);
        //实例化zoomToExtent控件并加载到地图容器中
        var zoomToExtent = new ol.control.ZoomToExtent({
            extent: [
            13100000, 4290000,
            13200000, 5210000
            ]
        });
        map.addControl(zoomToExtent); 

    </script>
</body>
</html>

